import React, { useState } from "react";
import { Button, Icon, Sheet, Modal } from "zmp-ui";
import styles from "./index.module.scss";
import IconCart from "static/icon/icon-cart.svg";
import NumStep from "components/NumStep";
interface Props {}

const ShopCart: React.FC<Props> = (props) => {
  const [loading, setLoading] = useState(false);
  const [sheetVisible, setSheetVisible] = useState(false);
  const [dialogVisible, setDialogVisible] = useState(false);

  const [cartList, setCartList] = useState([]);
  const onConfirm = () => {};
  const onCancel = () => {
    setDialogVisible(false);
  };
  const openCart = () => {
    setSheetVisible(!sheetVisible);
  };
  const clearAll = () => {
    setDialogVisible(true);
  };
  return (
    <>
      <div className={styles["shop-cart-wrapper"]}>
        <Sheet
          visible={sheetVisible}
          onClose={() => setSheetVisible(false)}
          autoHeight
          mask={false}
          zIndex={9}
          handler={false}
          swipeToClose
        >
          <div className={styles["shop-cart-content"]}>
            <div className={styles["shop-cart-title"]}>
              <div className={styles["title-1"]}>购物车</div>
              <div className={styles["clear-all"]} onClick={clearAll}>
                <Icon icon="zi-delete" />
              </div>
            </div>
            <div className={styles["shop-cart-goods-list"]}>
              <div className={styles["goods-item"]}>
                <div className={styles["goods-item-top"]}>
                  <div className={styles["item-top-left"]}>
                    <h4>商品名称</h4>
                    <p className={styles["goods-desc"]}>
                      规格描述等规格描述等规格描述等规格描述等规格描述等规格描述等
                      规格描述等规格描述等规格描述等规格描述等规格描述等规格描述等
                    </p>
                  </div>
                  <img
                    className={styles["goods-img"]}
                    src="https://fastly.picsum.photos/id/287/180/180.jpg?hmac=1CwK9nTH0-vhqB1B7nhfQR7aeIEdAHY3wkClM6YeSPo"
                  />
                </div>
                <div className={styles["goods-item-bottom"]}>
                  <p className={styles["goods-price"]}>d 12345</p>
                  <NumStep />
                </div>
              </div>
            </div>
          </div>
          <div className={styles["place-box-2"]}></div>
        </Sheet>
        <div className={styles["shop-cart-bar"]}>
          <div className={styles["shop-cart-icon"]} onClick={openCart}>
            <img src={IconCart} alt="" />
            <div className={styles["bage-box"]}>1</div>
          </div>
          <div className={styles["shop-card-price"]}>d 123000</div>
          <Button className="ml-auto">购买</Button>
        </div>

        <div className={styles["place-box"]}></div>
      </div>
      <Modal
        visible={dialogVisible}
        onClose={() => setDialogVisible(false)}
        maskStyle={{ zIndex: 999 }}
      >
        <div className={styles["dialog-confirm-wrapper"]}>
          <div className={styles["dialog-confirm-content"]}>
            确认删除购物车中所有商品？
          </div>
          <div className={styles["dialog-confirm-footer"]}>
            <button className={styles["cancel-btn"]} onClick={onCancel}>
              取消
            </button>
            <button className={styles["confirm-btn"]} onClick={onConfirm}>
              确认
            </button>
          </div>
        </div>
      </Modal>
    </>
  );
};
export default ShopCart;
